<template >
    <div class="navbar">
        <a class="active" href="#">首页</a>
        <a>物联网设备信息</a>
        <!-- 添加用户图片 -->
        <img class="user-image" src="../../images/top.jpg" alt="User Image"/>
        <a class="exit" @click="exit" >退出登录</a>
    </div>
   
</template>

<script>
export default {
    name: "NavBar",
    methods:{
        exit(){
            // 退出登录的操作
            sessionStorage.removeItem("token");
            sessionStorage.clear();
            this.$router.push('/'); // 跳转到首页
        }
    },
    props:["tenantId", "tenantName"]
}
</script>
<style scoped>
.navbar {
    background-color: #333;
    overflow: hidden;
    height: 60px;
}

.navbar a {
    float: left;
    display: block;
    color: #fff;
    text-align: center;
    padding: 20px 20px;
    text-decoration: none;
}

.navbar a:hover {
    background-color: #555;
}

.navbar a.active {
    background-color: #007bff;
}

/* 添加用户图片样式 */
.navbar .user-image {
    height: 50px; /* 图片高度 */
    width: 50px; /* 图片宽度 */
    border-radius: 50%; /* 圆形图片 */
    margin-top: 4px; 
    margin-right: 4px; 
    float: right; /* 图片靠右 */
    margin-left: 20px; /* 右边距 */
}
.navbar .exit {
    float: right;
}

</style>